﻿<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>色卡制作工具</title>
  <link rel="icon" type="image/png" sizes="16x16" href="./icon/card.png">
  <link rel="stylesheet" href="./css/color-maker.css">
</head>

<body>
  <div class="app-container">
    <!-- 工具标题和操作区 -->
    <div class="tool-header" style="grid-column: 1 / -1;">
      <div class="tool-title">
        <h1>色卡制作工具</h1>
      </div>
      <div class="tool-actions">
        <button type="button" class="btn btn-ghost btn-small" id="importBtn">导入色卡</button>
        <button type="button" class="btn btn-ghost btn-small" id="exportJsonBtn">导出 JSON</button>
        <button type="button" class="btn btn-ghost btn-small" id="exportCsvBtn">导出 CSV</button>
        <input type="file" id="importInput" accept=".json,.csv" hidden>
      </div>
    </div>

    <!-- 左侧面板 -->
    <div class="left-panel">
      <!-- 颜色制作面板 -->
      <div class="panel">
        <div class="panel-header">
          <div class="panel-title">颜色制作</div>
        </div>

        <form id="colorForm">
          <div class="form-grid">
            <div class="form-group">
              <label class="form-label">颜色类型</label>
              <select class="form-select" id="colorType">
                <option value="normal">普通</option>
                <option value="pearlescent">珠光</option>
                <option value="light">光变</option>
                <option value="temperatrue">温变</option>
                <option value="transparent">透明</option>
                <option value="glow">夜光</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">色号</label>
              <input type="text" class="form-input" id="colorNum" placeholder="如：001" autocomplete="off">
            </div>
          </div>

          <!-- 主颜色配置 -->
          <div class="color-config">
            <div class="color-config-header">
              <div class="color-config-title">颜色一</div>
              <span class="color-config-tag" id="primaryColorTag">RGB</span>
            </div>
            <div class="color-config-body">
              <input type="color" class="color-picker" id="primaryColorPicker" value="#ffffff">
              <div class="rgb-inputs">
                <div class="rgb-input">
                  <span>R</span>
                  <input type="number" min="0" max="255" value="255" id="primaryColorR">
                </div>
                <div class="rgb-input">
                  <span>G</span>
                  <input type="number" min="0" max="255" value="255" id="primaryColorG">
                </div>
                <div class="rgb-input">
                  <span>B</span>
                  <input type="number" min="0" max="255" value="255" id="primaryColorB">
                </div>
              </div>
            </div>
            <div class="alpha-control" id="primaryAlphaControl">
              <span>Alpha</span>
              <div class="alpha-range">
                <input type="range" min="0" max="100" value="100" id="primaryColorA">
                <span class="alpha-value" id="primaryAlphaValue">100%</span>
              </div>
            </div>
          </div>

          <!-- 次颜色配置 -->
          <div class="color-config" id="secondaryColorConfig" style="display: none;">
            <div class="color-config-header">
              <div class="color-config-title">颜色二 (可选)</div>
              <div style="display: flex; align-items: center; gap: 8px;">
                <span class="color-config-tag">RGBA</span>
                <label
                  style="display: flex; align-items: center; gap: 4px; font-size: 11px; color: #5f6683; cursor: pointer;">
                  <input type="checkbox" id="secondaryColorEnabled">
                  <span>启用</span>
                </label>
              </div>
            </div>
            <div class="color-config-body">
              <input type="color" class="color-picker" id="secondaryColorPicker" value="#ffffff" disabled>
              <div class="rgb-inputs">
                <div class="rgb-input">
                  <span>R</span>
                  <input type="number" min="0" max="255" value="255" id="secondaryColorR" disabled>
                </div>
                <div class="rgb-input">
                  <span>G</span>
                  <input type="number" min="0" max="255" value="255" id="secondaryColorG" disabled>
                </div>
                <div class="rgb-input">
                  <span>B</span>
                  <input type="number" min="0" max="255" value="255" id="secondaryColorB" disabled>
                </div>
              </div>
            </div>
            <div class="alpha-control" id="secondaryAlphaControl">
              <span>Alpha</span>
              <div class="alpha-range">
                <input type="range" min="0" max="100" value="100" id="secondaryColorA" disabled>
                <span class="alpha-value" id="secondaryAlphaValue">100%</span>
              </div>
            </div>
          </div>

          <div class="form-actions">
            <button type="submit" class="btn btn-primary" id="addColorBtn">添加至色卡</button>
            <button type="button" class="btn btn-secondary" id="resetFormBtn">重置</button>
          </div>
        </form>
      </div>

      <!-- 色卡管理面板 -->
      <div class="panel" style="flex: 1;">
        <div class="panel-header">
          <div class="panel-title">色卡管理</div>
          <span class="badge" id="colorCountBadge">0 色</span>
        </div>
        <div class="panel-content">
          <div id="colorList" class="color-list">
            <!-- 色卡内容 -->
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧面板 -->
    <div class="right-panel">
      <div class="panel right-panels" style="flex: 1;">
        <div class="panel-header">
          <div class="panel-title">试色画布</div>
        </div>

        <div class="preview-controls">
          <div class="preview-control">
            <p>画布光效</p>
            <select id="previewMode">
              <option value="standard">标准/白昼</option>
              <option value="night">夜光模式</option>
              <option value="temperature">温变预览</option>
              <option value="light">光变预览</option>
              <option value="special">多效联动</option>
            </select>
          </div>
          <button type="button" class="btn btn-ghost btn-small" id="useCurrentColorBtn">使用当前编辑颜色</button>
          <button type="button" class="btn btn-ghost btn-small" id="clearCanvasBtn">清空画布</button>
        </div>

        <div class="preview-canvas-container">
          <canvas id="previewCanvas"></canvas>
        </div>

        <div class="preview-active-color" id="activeColorPreview">
          <div class="preview-swatch" id="activeColorSwatch"></div>
          <div class="preview-info">
            <div class="preview-code" id="activeColorCode">001</div>
            <div class="preview-type" id="activeColorType">普通色</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 导出命名模态框 -->
  <div class="modal" id="exportModal">
    <div class="modal-content">
      <h3 class="modal-title">填写色卡名称</h3>
      <p class="modal-hint">导出时会使用该名称，默认为"拼豆色卡"。</p>
      <input type="text" class="modal-input" id="exportNameInput" value="拼豆色卡" maxlength="60">
      <div class="modal-actions">
        <button type="button" class="btn btn-ghost" id="exportCancelBtn">取消</button>
        <button type="button" class="btn btn-primary" id="exportConfirmBtn">确认</button>
      </div>
    </div>
  </div>
  <script type="module" src="./js/color-maker.js"></script>
</body>

</html>